<template>
  <div class="container">
    <MyNav>登录</MyNav>
    <LoginRegion></LoginRegion>
    <!--    登录-->
    <van-form @submit="onSubmit" label-width="60px" style="text-align: left">
      <van-field
          v-model="username"
          name="userName"
          label="账号"
          placeholder="请输入账号"
          :rules="[{ required: true, message: '账号不能为空' }]"
      />
      <van-field
          v-model="password"
          type="password"
          name="passWord"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ validator,required: true, message: '密码不得小于6位' }]"
      />
      <van-field name="checkbox" class="myList">
        <template #input>
          <!--<van-checkbox v-model="checkbox" icon-size="16px" />-->
          <van-checkbox v-model="checkbox" icon-size="16px">记住我</van-checkbox>
        </template>
      </van-field>
      <!--      {{checkbox}}-->
      <div style="margin: 16px;">
        <van-button block type="info" native-type="submit" color="#67ABD6" plain>登 录</van-button>
      </div>
      <router-link :to="myLink" style="margin-left: 13px;font-size: 14px;color: black">没有账号？立即注册</router-link>
      <router-link to="/forget" style="float: right;font-size: 14px;color: black">忘记密码？</router-link>
    </van-form>

    <div class="icoBox">
      <!--      <van-icon name="wechat" />-->
      <img src="../assets/QQ.png" alt="" @click="myClick">
      <img src="../assets/WX.png" alt="" @click="myClick">
      <img src="../assets/WB.png" alt="" @click="myClick">
    </div>
    <span style="font-size: 13px" @click="myClick">更多登录方式>></span>
  </div>
</template>

<script>
import {login} from "@/api/http";
import MyNav from "@/components/MyNav";
// import {praiseList} from "@/api/http";

import { Toast } from 'vant';
import LoginRegion from "@/components/LoginRegion";
export default {
  name: "LoginView",
  components:{
    LoginRegion,
    MyNav,
  },
  data() {
    return {
      //登录
      username: '',
      password: '',
      checkbox: true,
      //  校验手机号
      //   pattern:/^1[3|4|5|7|8][0-9]{9}$/,
      //  跳转到注册
      myLink:"/register"
    };
  },
  methods: {
    //校验密码
    validator(val) {
      return /\d{6}/.test(val);
    },
    //登录点击提交
    onSubmit(values) {
      //userName 用户名 passWord 密码
      console.log('submit', values);
      //登录
      login(values.userName,values.passWord,this.checkbox).then(res=>{
        console.log(res)
        if(res.code == 0){
          Toast.success('登录成功！');
          //修改用户信息状态
          this.$store.commit('changeUserInfo',res.data);
          this.$store.commit('changeLogin',true);
          setTimeout(()=>{
            this.$router.go(-1);
          },500)

        }else{
          Toast.fail(res.msg+'，请重试！');
        }
      })
    },
    //  点击更多登录方式
    myClick(){
      Toast('该功能尚未开通，敬请期待！');
    }
  },
}
</script>

<style scoped lang="less">
.container {
  text-align: center;
  span {
    font-size: 14px;
  }
  .icoBox {
    display: flex;
    justify-content: space-evenly;
    margin-top: 80px;
    margin-bottom: 10px;
    img {
      width: 35px;
      height: 35px;
    }
  }

}
</style>